<template>
  <div class="field-input">
    <template
      v-if="
        (tableField.fieldVariableValue &&
          tableField.fieldVariableValue.type === 1 &&
          tableField.fieldVariableValue.auxiliaryEntry) ||
        tableField.variableType == 80
      "
    >
      <template v-if="birthmark">
        <el-input :size="size" class="inline-input" v-model="localValue" :disabled="disabled || readOnly"></el-input>
        <el-dropdown class="e-el-dropdown" v-if="restaurants.length > 0" @command="handleTags" trigger="click">
          <el-button style="margin-left: 5px;width: 33px;" class="e-el-button" size="mini" :disabled="disabled || readOnly">...</el-button>
          <el-dropdown-menu size="small" slot="dropdown">
            <el-dropdown-item v-for="(tag, index) in restaurants" :command="tag.value" :key="index">{{
              tag.value
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>

      <template v-else>
        <el-input :size="size" class="inline-input" v-model="localValue" :disabled="disabled || readOnly"></el-input>
        <el-dropdown v-if="restaurants.length > 0" @command="handleTags" trigger="click">
          <el-button style="margin-left: 5px;width: 33px;" size="mini" :disabled="disabled || readOnly">...</el-button>
          <el-dropdown-menu size="small" slot="dropdown">
            <el-dropdown-item v-for="(tag, index) in restaurants" :command="tag.value" :key="index">{{
              tag.value
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </template>

    <template
      v-else-if="
        tableField.fieldVariableValue && tableField.fieldVariableValue.type === '2' && tableField.variableType === '70'
      "
    >
      <el-input :size="size" class="inline-input" v-model="localValue" :disabled="disabled || readOnly"></el-input>

      <el-popover placement="right" width="400" trigger="click" v-model="dialogVisible">
        <el-table
          ref="fitlerTable"
          :data="tableList"
          height="240px"
          tooltip-effect="dark"
          header-align="left"
          align="left"
          :size="size"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="60"> </el-table-column>
          <template v-for="column in columns">
            <el-table-column :label="column.name" :prop="column.key"> </el-table-column>
          </template>
        </el-table>
        <div style="text-align: right; margin-top: 10px">
          <el-button :size="size" @click="dialogVisible = false">取消</el-button>
          <el-button :size="size" type="primary" @click="submitColumns">确认</el-button>
        </div>
        <el-button style="margin-left: 5px;" slot="reference" size="mini" :disabled="disabled || readOnly" @click="openTranscript">...</el-button>
      </el-popover>
    </template>

    <template v-else>
      <template v-if="localValue && tableField.fieldVariableValue && tableField.fieldVariableValue.type == 2">
        <el-popover placement="top-start" title="" width="200" trigger="hover" :content="localValue">
          <el-input
            slot="reference"
            :size="size"
            v-model="localValue"
            clearable
            :disabled="tableField.fieldVariableValue.isOnlyRead == '0' || disabled || readOnly"
          ></el-input>
        </el-popover>
      </template>

      <template v-else>
        <el-input :size="size" v-model="localValue" clearable :disabled="disabled || readOnly"></el-input>
      </template>
    </template>
  </div>
</template>

<script>
import Mixins from './mixins'
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  mixins: [Mixins],
  data() {
    return {
      restaurants: [],
      transcribingValue: '',
      dialogVisible: false,
      columns: [],
      tableList: [],
      currentValue: '',
    }
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo,
    }),
    ...mapGetters({
      findRole: 'treatment/findRole',
    }),
  },
  mounted() {
    if (this.tableField.variableType === '70') {
      if (this.tableField.fieldVariableValue) {
        this.tableField.fieldVariableValue.auxiliaryEntry && (this.restaurants = this.loadAll())
      }
    } else {
      this.restaurants = [{ value: 'NA(不适用)' }, { value: 'ND(未做)' }, { value: 'UK(未知)' }]
    }
  },
  methods: {
    ...mapActions('eCRFDetail', ['getSubjectDataTranscript']),
    querySearch(queryString, cb) {
      let restaurants = this.restaurants
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    loadAll() {
      let arr = []
      let auxiliaryEntry = this.tableField.fieldVariableValue.auxiliaryEntry
      let separator
      if (auxiliaryEntry.indexOf('|') >= 0) {
        separator = '|'
      } else if (auxiliaryEntry.indexOf('｜') >= 0) {
        separator = '｜'
      }
      if (separator) {
        arr = auxiliaryEntry.split(separator)
        arr = arr.map(item => {
          return { value: item }
        })
      }
      return arr
    },
    handleTags(command) {
      this.localValue = command
    },
    // 选择切换
    selectionChange: function (selections) {
      this.selections = selections
      let selectvalue = []
      this.selections.forEach(select => {
        let list = []
        for (let key in select) {
          list.push(select[key] || '""')
        }
        selectvalue.push(list.join('##'))
      })
      this.currentValue = selectvalue.join('@@')
    },
    //转抄
    openTranscript () {
      this.tableList = []
      const { id } = this.subjectInfo
      const { conditionVariable, conditionValue, crfId, visits, crfNameVariableList } = this.tableField.fieldVariableValue
      let conditionNewValue = ''
      this.tableFieldList&&this.tableFieldList.forEach(item => {
        if (item.variable === conditionVariable) {
          conditionNewValue = item.variableValue
        }
      })
      const data = {
        conditionVariable,
        conditionValue,
        subjectId: id,
        formDataId: this.tableStatus&&this.tableStatus.formDataId,
        visits,
        crfId,
        crfNameVariableList,
        conditionNewValue
      }
      this.getSubjectDataTranscript({data})
        .then(res => {
          const { code, data } = res
          if (code == 200) {
            if (data && data.head && data.data.length > 0) {
              this.tableList = data.data
              this.columns = []
              let serialNumber = ''
              for (let key in data.head) {
                if (key === 'SerialNumber') {
                  serialNumber = {
                    key: key,
                    name: data.head[key],
                  }
                } else {
                  this.columns.push({
                    key: key,
                    name: data.head[key],
                  })
                }
              }
              if (serialNumber) {
                this.columns.unshift(serialNumber)
              }
            }
          }
        })
    },
    submitColumns() {
      this.localValue = this.currentValue
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.field-input {
  position: relative;

  .e-el-dropdown {
    position: absolute;
    z-index: 1;
    // left: 6rem;
  }

  .e-el-button {
    width: 1rem;
    height: 1.8rem;
    border: none;
    background: transparent;
    position: absolute;
    z-index: 1;
    top: -0.3rem;
    right: -0.1rem;
    font-size: 1rem;
  }
}
</style>
